<template>
	<div class="login">
		<div class="login-head">
			<div class="l-h-left">
				<div class="logotext">乏燃料后处理厂事故风险统计分析模块</div>
			</div>
			<div class="l-h-icon">
				<i class="el-icon-question"></i>
			</div>
		</div>
		<div class="login-frame">
			<div class="login-m">
				<img src="/img/login/logo2.png" alt />
			</div>
			<div class="login-pic">
				<div class="title">乏燃料后处理厂事故风险统计分析模块</div>
			</div>
			<div class="login-form">
				<div class="form-head">账号密码登录</div>
				<el-form
					class="login-form__wrap m-b-20"
					label-width="0px"
					ref="form"
					:model="ruleForm"
					:rules="rules"
				>
					<el-form-item class="margin-b20" prop="username">
						<el-input
							ref="ipt"
							prefix-icon="el-icon-user"
							placeholder="手机号/账户名"
							v-model="ruleForm.username"
							@keyup.enter.native="loginFun"
							clearable
						></el-input>
					</el-form-item>
					<el-form-item class="mm m-b-0" prop="password">
						<el-input
							autocomplete="new-password"
							prefix-icon="el-icon-lock"
							placeholder="密码"
							v-model="ruleForm.password"
							:type="showPassword ? 'text' : 'password'"
							@keyup.enter.native="loginFun"
						>
							<i
								slot="suffix"
								class="el-input__icon iconfont icon-bukejian"
								v-if="!showPassword"
								@click="passwordVisibleClick"
							></i>
							<i
								slot="suffix"
								class="el-input__icon iconfont icon-kejian"
								v-else
								@click="passwordVisibleClick"
							></i>
						</el-input>
					</el-form-item>
					<el-form-item class="m-b-0" prop="verify">
						<!-- <Vcode :show="isShow" @success="onSuccess" @close="onClose" /> -->
					</el-form-item>
					<div class="btn-wrap">
						<!-- <span @click="forgetPwd">忘记密码</span>
						<div class="right-b">
							<el-checkbox v-model="remember">记住密码</el-checkbox>
						</div>-->
					</div>
					<el-button :loading="loading" class="login-btn margin-b20" type="primary" @click="loginFun">登录</el-button>
				</el-form>
			</div>
			<div class="login-bottom">
				<div class="bot_con">
					<img src="/img/login/logo.png" alt />

					<div class="b-c-r">
						<span>研发单位：北京三易思创科技有限公司</span>
						<span>版权所有：中国核电工程有限公司</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Vcode from "vue-puzzle-vcode"
import { mediaLogin } from "@/service/login"
import { setStore } from "@/utils/Tools"
import SIdentify from "@/components/vcode/index"
export default {
	name: "login",
	props: {},
	components: {
		SIdentify,
		Vcode,
	},
	data() {
		return {
			loading: false,
			remember: false,
			isShow: false,
			ruleForm: {
				username: "",
				password: "",
				verify: "",
				longSystem: "优客租户平台",
				longPt: "PC",
				prodCode: "SALES_SERVICE",
			},
			showPassword: false,
			identifyCode: "",
			identifyCodes: "1234567890",
			rules: {
				username: [
					{
						required: true,
						message: "请输入手机号/账户名",
						trigger: "change",
					},
				],
				password: [
					{
						required: true,
						message: "请输入密码",
						trigger: "change",
					},
				],
			},
		}
	},
	mounted() {},
	methods: {
		loginFun() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					let params = {
						username: this.ruleForm.username,
						password: this.ruleForm.password,
					}
					this.$appApi
						.USER_LOGIN(params)
						.then((res) => {
							var str = res.data.substring(0, 1)
							if (str == "E") {
								let message = res.data.substring(6)
								this.$notify.error({
									title: "登录失败！",
									message: message,
									type: "success",
								})
							} else if (str == "S") {
								// this.$notify({
								// 	message: "登录成功！",
								// 	type: "success",
								// })
								sessionStorage.setItem(
									"HD5",
									JSON.stringify(params)
								)
								this.$router.push({
									path: "/home",
								})
							}
						})
						.catch((err) => {
							console.log(err)
						})
				}
			})
		},

		// onSuccess() {
		// 	this.isShow = false // 通过验证后，需要手动隐藏模态框

		// 	this.$refs.form.validate(valid => {
		// 		if (valid) {
		// 			let params = {
		// 				username: this.ruleForm.username,
		// 				password: this.ruleForm.password,
		// 				ext: "",
		// 				longSystem: this.ruleForm.longSystem,
		// 				longPt: this.ruleForm.longPt,
		// 				prodCode: this.ruleForm.prodCode
		// 			}
		// 			if (this.remember) {
		// 				this.setCookie(
		// 					this.ruleForm.username,
		// 					this.ruleForm.password
		// 				)
		// 			} else {
		// 				this.clearCookie()
		// 			}
		// 			this.$store.dispatch(
		// 				"updateUsername",
		// 				this.ruleForm.username
		// 			)
		// 			this.loading = true
		// 			mediaLogin(params).then(response => {
		// 				this.loading = false
		// 				if (response.data.code == 1000) {
		// 					let data = response.data.data
		// 					if (data) {
		// 						setStore("token", data.token)
		// 						this.$store.dispatch("updateToken", data.token)
		// 						this.$store.dispatch(
		// 							"updateTenementid",
		// 							data.tenementId
		// 						)
		// 						this.$store.dispatch(
		// 							"updateSystemcode",
		// 							this.ruleForm.prodCode
		// 						)
		// 						this.$store.dispatch(
		// 							"commit_systemId",
		// 							data.systemId
		// 						)
		// 						this.$router.push("/home")
		// 					}
		// 				} else if (response.data.code == 1002) {
		// 					this.alertDialog("您的账户已被锁定，请联系管理员！")
		// 				} else if (response.data.code == 1003) {
		// 					// this.alertDialog(
		// 					// 	"您的账户已被锁定，请在" +
		// 					// 		data.data +
		// 					// 		"后重试！"
		// 					// )
		// 				} else if (response.data.code == 1004) {
		// 					this.alertDialog("账户或密码错误，请重新输入！")
		// 				} else if (response.data.code == 1005) {
		// 					this.alertDialog("您的账户已被注销，请联系管理员！")
		// 				} else if (response.data.code == 1006) {
		// 					this.alertDialog(
		// 						"您当前是离职状态，无权登录本系统！"
		// 					)
		// 				} else if (response.data.code == 1007) {
		// 					// this.alertDialog(
		// 					// 	"账户或密码错误，请重新输入，您还可以尝试" +
		// 					// 		data.data +
		// 					// 		"次！"
		// 					// )
		// 				} else if (response.data.code == 1008) {
		// 					this.alertDialog("该账户不存在")
		// 				} else if (response.data.code == 1011) {
		// 					this.$store.dispatch(
		// 						"updatePwdtitle",
		// 						"您的密码被重置，请修改密码后再登录！"
		// 					)
		// 					this.$router.push({
		// 						path: "/fpwd"
		// 					})
		// 				} else if (response.data.code == 1013) {
		// 					this.$store.dispatch(
		// 						"updatePwdtitle",
		// 						"您第一次访问系统，请修改密码后再登录！"
		// 					)
		// 					this.$router.push({
		// 						path: "/fpwd"
		// 					})
		// 				} else if (
		// 					response.data.code == 1014 ||
		// 					response.data.code == 1010
		// 				) {
		// 					this.$store.dispatch(
		// 						"updatePwdtitle",
		// 						"您的密码已过期，请修改密码后再登录！"
		// 					)
		// 					this.$router.push({
		// 						path: "/fpwd"
		// 					})
		// 				} else if (response.data.code == 1015) {
		// 					this.alertDialog("您已登录系统，请不要重复登录！")
		// 				} else if (response.data.code == 1016) {
		// 					this.alertDialog("您输入的分机号错误！")
		// 				}
		// 			})
		// 		}
		// 	})
		// },
		// //设置cookie
		// setCookie(c_name, c_pwd, exdays) {
		// 	var exdate = new Date() //获取时间
		// 	exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) //保存的天数
		// 	//字符串拼接cookie
		// 	window.document.cookie =
		// 		"username" +
		// 		"=" +
		// 		c_name +
		// 		";path=/;expires=" +
		// 		exdate.toGMTString()
		// 	window.document.cookie =
		// 		"password" +
		// 		"=" +
		// 		c_pwd +
		// 		";path=/;expires=" +
		// 		exdate.toGMTString()
		// },
		// //读取cookie
		// getCookie() {
		// 	console.log(document.cookie.length)
		// 	if (document.cookie.length > 0) {
		// 		var arr = document.cookie.split("; ") //这里显示的格式需要切割一下自己可输出看下
		// 		for (var i = 0; i < arr.length; i++) {
		// 			var arr2 = arr[i].split("=") //再次切割
		// 			//判断查找相对应的值
		// 			if (arr2[0] == "username") {
		// 				this.remember = true
		// 				this.ruleForm.username = arr2[1] //保存到保存数据的地方
		// 			} else if (arr2[0] == "password") {
		// 				this.ruleForm.password = arr2[1]
		// 			}
		// 		}
		// 	}
		// },
		// //清除cookie
		// clearCookie() {
		// 	this.setCookie("", "", -1) //修改2值都为空，天数为负1天就好了
		// },
		passwordVisibleClick() {
			this.showPassword = !this.showPassword
		},
		// onClose() {
		// 	this.isShow = false
		// },
		// loginFun() {
		// 	this.$refs.form.validate(valid => {
		// 		if (valid) {
		// 			this.isShow = true
		// 		}
		// 	})
		// 	// if (this.identifyCode != this.ruleForm.verify) {
		// 	// 	this.$alert("验证码错误！", {
		// 	// 		title: "提示",
		// 	// 		type: "info"
		// 	// 	})
		// 	// 	this.autoFocus("code")
		// 	// 	this.refreshCode()
		// 	// 	return
		// 	// }
		// },
		// alertDialog(message) {
		// 	this.$alert(message, "登录信息", {
		// 		type: "info",
		// 		confirmButtonText: "关闭"
		// 	})
		// },
		// autoFocus(ref) {
		// 	this.$refs[ref].focus()
		// },
		// register() {
		// 	this.$router.push({
		// 		path: "/phoneregister"
		// 	})
		// },
		// randomNum(min, max) {
		// 	return Math.floor(Math.random() * (max - min) + min)
		// },
		// refreshCode() {
		// 	this.identifyCode = ""
		// 	this.makeCode(this.identifyCodes, 4)
		// },
		// makeCode(o, l) {
		// 	for (let i = 0; i < l; i++) {
		// 		this.identifyCode += this.identifyCodes[
		// 			this.randomNum(0, this.identifyCodes.length)
		// 		]
		// 	}
		// },
		// forgetPwd() {
		// 	this.$router.push({
		// 		path: "/RetrievePwd"
		// 	})
		// }
	},
}
</script>

<style>
.codeicon {
	position: absolute;
	right: 0;
}
.title {
	font-size: 50px;
	color: #1962ce;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
</style>